<template>
	<view class="wrapper">
		<video id="videoSrc" style="display:block;" autoplay @loadedmetadata="loadMeta" :src="video.url" loop :poster="video | poster"></video>
<!-- 		<canvas type="2d" disable-scroll canvas-id="video" id="video">
			
		</canvas> -->
	</view>
</template>

<script>
	export default {
		async onLoad(opts){
			const {video, poster} = opts
			console.log(opts)
			this.video.poster = opts.poster
			await this.getVideo(video)
		},
		
		data() {
			return {
				video:{
					_id:'',
					url:'',
					duration:'',
					width:'',
					height:'',
					poster:''
				},
				context:'',
				src:'',
			}
		},
		methods: {
			async getVideo(_id){
				const db = uniCloud.database()
				const videos = db.collection('video')
				const {result} = await videos.doc(_id).get()
				this.video = result.data[0]
			},
			
			loadMeta(evt){
				console.log(evt)
				Object.assign(this.video, evt.detail)
				// this.context = document.getElementsByTagName('canvas')[0].getContext('2d')
				// this.video = document.getElementsByTagName('video')[0]
				console.log(this.video)
				// this.renderVideo()
			},
			
			renderVideo(){
				// 将video上的图片的每一帧以图片的形式绘制的canvas上
				this.context.drawImage(this.video, 0, 0, this.meta.width, this.meta.height);
				requestAnimationFrame(this.renderVideo);
			}
		}
	}
</script>

<style>
	.wrapper{
		position: relative;
	}
	
	canvas{
		width: 100vw;
		height: 100vh;
		background: black;
	}
	
	video{
		width: 100vw;
		height: 100vh;
		
		background-color: black;
	}
	
	button{
		position: absolute;
		left: 50vw;
		top:50vh;
	}
</style>
